<template>
    <div class="smap-info">
        <div class="smap-info-title">
            <div class="smap-info-h">
                <label class="smap-info-title-t1">{{ properties['originAreaName'] }}</label>
                <label class="smap-info-title-t2">{{ properties['originArea'] }}</label>
                <!-- <div class="smap-info-title-t3">{{ properties['riskLevel'] }}</div> -->
            </div>
            <div class="smap-info-title-btn">
                <svg-icon icon-class="file" /><span>官方报告</span>
            </div>
        </div>
        <div class="smap-info-indicator">
            <div class="smap-info-v">
                <label class="smap-info-indicator-title">风险指数</label>
                <label class="smap-info-indicator-num">{{ properties['riskScore'] }}</label>
            </div>
            <div class="smap-info-indicator-chart">
                <tiny-chart :values="properties['trend']" />
            </div>
        </div>
        <div class="smap-info-separator"></div>
        <div class="smap-info-info">
            <div class="smap-info-line">
                病例<span class="smap-info-info-hfont">{{ properties['caseCount'] }}</span
                >人
            </div>
            <!-- <div class="smap-info-line">
                新增确诊病例<span class="smap-info-info-hfont">987</span>人
            </div>
            <div class="smap-info-line">
                新增死亡病例<span class="smap-info-info-hfont">7</span>人
            </div> -->
            <div class="smap-info-line">
                时间<span>{{ properties['caseDate'] }}</span>
            </div>
        </div>
        <div class="smap-info-separator"></div>
        <div class="smap-info-flight">
            <div class="smap-info-line">
                航班<span class="smap-info-info-hfont">{{ properties['flightCount'] }}</span
                >人次
            </div>
            <div class="smap-info-line">
                时间<span>{{ properties['flightDate'] }}</span>
            </div>
        </div>
    </div>
</template>

<script>
import TinyChart from '../../../components/TinyChart/index.vue'

export default {
    name: 'SMapInfo',
    components: { TinyChart },
    props: {
        properties: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {
            riskScore: 0.09,
            riskLevel: '极高风险',
            riskLevelColor: 'rgba(234, 110, 131, 1)',
            date: '2025-06-30',
            originArea: 'HN',
            originAreaLabel: '美国',
            destinationArea: 'CN',
            destinationAreaLabel: '中国',
            lastDate: null,
            runDate: '2025-06-30',
            lastRiskScore: null,
            ratio: null,
        }
    },
}
</script>
<style lang="scss" scoped>
.smap-info {
    width: 260px;
    height: 208px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 10px;
    gap: 8px;

    &-title {
        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 4px;

        width: 248px;
        height: 24px;

        border-radius: 8px;

        /* Inside auto layout */
        flex: none;
        align-self: stretch;
        flex-grow: 0;
        z-index: 0;

        &-t1 {
            // width: 24px;
            max-width: 60;
            height: 12px;

            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            line-height: 12px;
            /* identical to box height, or 100% */
            text-transform: uppercase;

            /* N1 */
            color: #1f264d;
        }
        &-t2 {
            /* Text */

            // width: 14px;
            max-width: 40px;
            height: 10px;

            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 500;
            font-size: 10px;
            line-height: 10px;
            /* identical to box height, or 100% */
            text-transform: uppercase;

            /* N3 */
            color: #898ca3;
        }
        &-t3 {
            /* 标签
            👇 状态、浅色、深色的多种颜色标签
            */

            // display: flex;
            // flex-direction: row;
            /* gap: 4px; */
            // width: 60px;
            padding: 2px 5px;
            // height: 20px;
            background: #eb5e75;
            border-radius: 2px;
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 500;
            font-size: 12px;
            /* line-height: 3px; */
            text-align: center;
            color: #ffffff;
            justify-content: center;
        }
        &-btn {
            box-sizing: border-box;

            /* Auto layout */
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            // padding: 6px 8px;
            gap: 4px;

            width: 80px;
            height: 25px;

            /* N9 */
            background: #ffffff;
            /* N5 */
            border: 1px solid #d8d9e6;
            border-radius: 2px;

            /* 文案 */

            /* Small/UI */
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            /* identical to box height, or 133% */

            /* N1 */
            color: #1f264d;
        }
    }
    &-indicator {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        padding: 0px;
        gap: 8px;

        width: 100%;
        height: 40px;

        &-title {
            /* 序号 */
            flex: 1;
            width: 50px;
            height: 16px;

            /* Small/UI */
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 16px;
            /* identical to box height, or 133% */

            /* N2 */
            color: #596080;
        }
        &-num {
            /* 序号 */

            width: 120px;
            height: 22px;

            /* H3-16px */
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 600;
            font-size: 16px;
            line-height: 22px;
            /* identical to box height, or 138% */

            /* 红色/R1 */
            color: #e6455f;
        }
        &-chart {
            flex: 1;
            /* _折线图 */

            width: 120px;
            height: 40px;
        }
    }
    &-separator {
        /* Line 1 */
        box-sizing: border-box;
        width: 248px;
        height: 0px;

        /* N9 */
        background: #ffffff;
        mix-blend-mode: multiply;
        /* N5 */
        border: 1px solid #d8d9e6;
        /* Inside auto layout */
        flex: none;
        align-self: stretch;
        flex-grow: 0;
        z-index: 4;
    }
    &-info,
    &-flight {
        /* Auto layout */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 8px;

        width: 248px;

        /* Inside auto layout */
        flex: none;
        align-self: stretch;
        flex-grow: 0;
        z-index: 3;

        &-hfont {
            /* Small/UI */
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 600;
            font-size: 12px;
            line-height: 16px;
            /* identical to box height, or 133% */

            /* N1 */
            color: #1f264d;
        }
    }
    &-line {
        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;

        width: 178px;
        height: 16px;

        background: rgba(255, 255, 255, 0.01);

        /* 编组 8备份 */

        /* Auto layout */
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;

        width: 248px;
        height: 16px;

        background: rgba(255, 255, 255, 0.01);

        /* Small/UI */
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        /* identical to box height, or 133% */

        /* N2 */
        color: #596080;
    }
    &-h {
        flex: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 4px;
    }
    &-v {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        gap: 2px;
    }
}
</style>
